
<form id="form_reglement" method="post" {{ form_enctype(form) }}>

    <div class="span12" style="width: 100%">
        <div class="box gradient">
            <div class="title">
                <div class="title" style="text-align: center">
                    <h4>Nouveau Reglement</h4>
                </div>
                <div class="content noPad clearfix">
                    <table style="width: 100%">
                        <tbody>
                            <tr>
                                <td style="width: 18%">
                                    <label>Date:</label>
                                    <div>
                                    {{ form_widget(form.date)}}{{ form_widget(form._token)}}
                                        <input id="now" type="text" style="width: 70px;" readonly/>
                                    </div>
                                </td>
                                <td  style="width: 15%">
                                    <label>Client:</label><input type="hidden" id="gds_ventebundle_reglementclienttype_client" name="gds_ventebundle_reglementclienttype[client]" />

                                    <div id="div_client" class="span8 controls" style="width: 200px">

                                        <div id='client'>
                                        </div>
                                        <script>
                                            client_id = 1
                                            client_old = 1
                                            var url = '{{path('gds_list_client_select')}}';
                                            var source =
                                                    {
                                                        datatype: "json",
                                                        datafields: [
                                                            {name: 'id'},
                                                            {name: 'raison_social'}
                                                        ],
                                                        url: url,
                                                        async: false
                                                    };
                                            var dataAdapter = new $.jqx.dataAdapter(source);
                                            $("#client").jqxComboBox({selectedIndex: 0, source: dataAdapter, displayMember: "raison_social", valueMember: "id", width: 200, height: 25});
                                            $("#client").on('select', function(event) {
                                                if (event.args) {
                                                    var item = event.args.item;
                                                    if (item) {
                                                        client_id = item.value
                                                        raison_social = item.label
                                                        $('#client_show').html(raison_social)
                                                        $('#gds_ventebundle_reglementclienttype_client').val(client_id)
                                                        clientChanged(client_id)
                                                        var valueelement = $("<div></div>");
                                                        valueelement.text("Value: " + item.value);
                                                        var labelelement = $("<div></div>");
                                                        labelelement.text("Label: " + item.label);
                                                        $("#selectionlog").children().remove();
                                                        $("#selectionlog").append(labelelement);
                                                        $("#selectionlog").append(valueelement);
                                                    }
                                                }
                                            });
                                            $('#gds_ventebundle_reglementclienttype_client').val(client_id)
                                            function clientChanged(client_id) {
                                                    $('#reglement_facture').html('')
                                                    $('#reglement_bon_livraison').html('')
                                                    $.ajax({
                                                        dataType: "json",
                                                        url: '{{path('gds_vente_reglement_get_document_non_regler')}}',
                                                        data: 'id=' + client_id,
                                                        mode: 'abort',
                                                        success: function(data) {
                                                            $('#reglement_facture').html(data.facture)
                                                            $('#reglement_bon_livraison').html(data.bonLivraison)
                                                        }
                                                    })
                                            }
                                        </script>
                                    </div> 
                                </td>
                                <td  style="width: 15%">
                                    <label>Numero Facture:</label>
                                {{ form_widget(form.reference,{'attr':{'class':'span8 text','style':'width:200px'}})}}
                                </td>
                                          {% if(is_granted('ROLE_ADMIN')) %}
                                <td  style="width: 10%">
                                    <label>Caisse:</label>
                                    <select id="caisse" >
                                    {% for caisse in caisses %}
                                        <option value="{{caisse.id}}">{{caisse}}</option>
                                    {% endfor %}
                                    </select>
                                </td>
                                        {% endif %}
                                <td style="width: 30%;vertical-align: bottom;">
                                    <label style="font-size: 30px;font-weight: bold">Total à Payer  :<span style="font-size: 30px;font-weight: bold;color: red" id="total_ttc">0.000</span></label>
                                </td>
                                <td>
                                    <a class="paiement" href="#paiement"><button class="btn"  style="width: 100%"><img src="/images/paiement/cash.png"/>Paiement</button></a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div><!-- End .box -->


</form>
<div class="span12" style="width: 100%">
    <div class="span6" style="width: 49%;margin-left: 0px">
        <div class="box gradient">
            <div class="title" style="text-align: center">
                <h4>Documents Non Reglés : <span id="client_show"></span></h4>
            </div>
            <div class="span12" style="width: 100%;margin-top: 10px;margin-left: 0px">
                <div class="box gradient">
                    <div class="title" style="text-align: center">
                        <h4>Factures</h4>
                    </div>
                    <div class="content noPad clearfix">
                        <table id="table_facture" cellpadding="0" cellspacing="0" border="0" class="responsive  display table table-bordered" width="100%">
                            <thead>
                                <tr >
                                    <th>N°</th>
                                    <th>Date</th>
                                    <th>Montant TTC</th>
                                    <th>Reste</th>
                                </tr>
                            </thead>
                            <tbody id="reglement_facture">
                                <tr>
                                    <td style="text-align: center" colspan="5">Sélectionner Client</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="span12" style="width: 100%;margin-left: 0px">
                <div class="box gradient">
                    <div class="title" style="text-align: center">
                        <h4>Bons Livraison</h4>
                    </div>
                    <div class="content noPad clearfix">
                        <table id="table_facture" cellpadding="0" cellspacing="0" border="0" class="responsive  display table table-bordered" width="100%">
                            <thead>
                                <tr >
                                    <th>N°</th>
                                    <th>Departement</th>
                                    <th>Date</th>
                                    <th>Montant TTC</th>
                                    <th>Reste</th>
                                </tr>
                            </thead>
                            <tbody id="reglement_bon_livraison">
                                <tr>
                                    <td style="text-align: center" colspan="5">Sélectionner Client</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="span6" style="width: 49%;margin-left: 2%">
        <div class="box gradient">
            <div class="title" style="text-align: center">
                <h4>Document à Regler</h4>
            </div>
            <div class="span12" style="width: 100%;margin-top: 10px;margin-left: 0px">
                <div class="box gradient">
                    <div class="title" style="text-align: center">
                        <h4>Factures</h4>
                    </div>
                    <div class="content noPad clearfix">
                        <table id="table_facture" cellpadding="0" cellspacing="0" border="0" class="responsive  display table table-bordered" width="100%">
                            <thead>
                                <tr >
                                    <th>N°</th>
                                    <th>Date</th>
                                    <th>Montant TTC</th>
                                    <th>Reste</th>
                                </tr>
                            </thead>
                            <tbody id="reglement_facture_select">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="span12" style="width: 100%;margin-left: 0px">
                <div class="box gradient">
                    <div class="title" style="text-align: center">
                        <h4>Bons Livraison</h4>
                    </div>
                    <div class="content noPad clearfix">
                        <table id="table_facture" cellpadding="0" cellspacing="0" border="0" class="responsive  display table table-bordered" width="100%">
                            <thead>
                                <tr >
                                    <th>N°</th>
                                    <th>Departement</th>
                                    <th>Date</th>
                                    <th>Montant TTC</th>
                                    <th>Reste</th>
                                </tr>
                            </thead>
                            <tbody id="reglement_bon_livraison_select">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="paiement" style='padding:10px; background:#fff;'></div>
<input type="hidden" id="heure"/>
<script type="text/javascript">
    $(document).ready(function() {
        $('#gds_ventebundle_reglementclienttype_date').datepicker();
        var fullDate = new Date();
        var twoDigitMonth = fullDate.getMonth()
        twoDigitMonth++
        twoDigitMonth += "";
        if (twoDigitMonth.length == 1)
            twoDigitMonth = "0" + twoDigitMonth;
        var twoDigitDate = fullDate.getDate() + "";
        if (twoDigitDate.length == 1)
            twoDigitDate = "0" + twoDigitDate;
        var currentDate = twoDigitDate + "/" + twoDigitMonth + "/" + fullDate.getFullYear();
        $("#gds_ventebundle_reglementclienttype_date").val(currentDate)
        setInterval(time, 1000);
        $(".paiement").colorbox({
            inline: true,
            width: "50%",
            height: "90%",
            onOpen: function() {
                $.ajax({
                    url: '{{path('gds_vente_reglement_paiement')}}',
                    data: 'client_id=' + client_id,
                    success: function(data) {
                        $('#paiement').html(data)
                        $('#total_a_payer').html($('#total_ttc').html())
                        $('#date_echeance').datepicker()
                        $('#montant_cheque').spinner({
                            min: 0,
                            max: 999999,
                            step: 1,
                            places: 3,
                            showOn: 'both'
                        });
                        $('#montant_cheque').val($('#total_ttc').html())
                    }
                })
            },
            onComplete: function() {

            },
            onCleanup: function() {

            },
            onClosed: function() {
                $('#paiement').html('')
            }
        });

    });
    function time() {
        var time = new Date($.now())
        h = time.getHours() // 0-24 format
        m = time.getMinutes()
        s = time.getSeconds()
        $('#heure').val(s + m * 60 + h * 3600)
        if (h < 10)
            h = '0' + h
        if (m < 10)
            m = '0' + m
        if (s < 10)
            s = '0' + s
        $('#now').val(h + ':' + m + ':' + s)
    }
    function reglementFacture(id, rest) {
        $('#reglement_facture_select').append('<tr id="list_reglement_facture_' + id + '" onclick="annulerReglementfacture(\'' + id + '\',\'' + rest + '\')"></tr>');
        $('#list_reglement_facture_' + id).html($('#list_facture_reglement_' + id).html())
        $('#list_facture_reglement_' + id).hide();
        $('#total_ttc').html((parseFloat($('#total_ttc').html()) + parseFloat(rest)).toFixed(3))
    }
    function annulerReglementfacture(id, rest) {
        $('#list_reglement_facture_' + id).remove()
        $('#list_facture_reglement_' + id).show();
        $('#total_ttc').html((parseFloat($('#total_ttc').html()) - parseFloat(rest)).toFixed(3))
    }
    function annulerReglementbonLivraison(id, rest) {
        $('#list_reglement_bon_livraison_' + id).remove()
        $('#list_bon_livraison_reglement_' + id).show();
        $('#total_ttc').html((parseFloat($('#total_ttc').html()) - parseFloat(rest)).toFixed(3))
    }
    function reglementBonLivraison(id, rest) {
        $('#reglement_bon_livraison_select').append('<tr id="list_reglement_bon_livraison_' + id + '" onclick="annulerReglementbonLivraison(\'' + id + '\',\'' + rest + '\')"></tr>');
        $('#list_reglement_bon_livraison_' + id).html($('#list_bon_livraison_reglement_' + id).html())
        $('#list_bon_livraison_reglement_' + id).hide();
        $('#total_ttc').html((parseFloat($('#total_ttc').html()) + parseFloat(rest)).toFixed(3))
    }
    function rglememt() {
        if ($('#type_paiement').val() != 'espece') {
            if ($('#compte_client').val() == '') {
                if ($('#compte_rib').val() == '' || $('#compte_banque').val() == '')
                {
                    $('#compte_banquaire').html('Ce champ est Obligatoire')
                    return false
                }
                else
                    $('#compte_banquaire').html('')
            }
            if ($('#numero_cheque').val() == '') {
                $('#numero_cheque_error').html('Ce champ est Obligatoire')
                return false
            } else {
                $('#numero_cheque_error').html('')
            }
            if ($('#date_echeance').val() == '') {
                $('#date_echeance_error').html('Ce champ est Obligatoire')
                return false
            } else {
                $('#date_echeance_error').html('')
            }
        }
        if ($('#montant_cheque').val() == '') {
            $('#montant_cheque_error').html('Ce champ est Obligatoire')
            return false
        } else {
            if (parseFloat($('#montant_cheque').val()) <= 0) {
                $('#montant_cheque_error').html('Il faut que ce champ soit supérieur a 0')
                return false
            } else
                $('#montant_cheque_error').html('')
        }
        td_type = '<td id="type_' + index + '">' + $('#type_paiement option:selected').html() + '</td>'
        if ($('#type_paiement').val() != 'espece') {
            td_numero = '<td id="numero_' + index + '">' + $('#numero_cheque').val() + '</td>'
            td_date = '<td id="date_' + index + '">' + $('#date_echeance').val() + '</td>'
            td_compte = '<td style="display: none"><input id="compte_id_' + index + '" type="hidden" value="' + $('#compte_client').val() + '" /></td>'
        } else {
            td_numero = '<td id="numero_' + index + '">-</td>'
            td_date = '<td id="date_' + index + '">-</td>'
            td_compte = '<td style="display: none"></td>'
        }
        td_montant = '<td id="montant_' + index + '">' + $('#montant_cheque').val() + '</td>'
        $('#list_paiement').append('<tr>' + td_type + td_montant + td_numero + td_date + td_compte + '</td>' + '</tr>')
        if ($('#compte_rib').val() != '' || $('#compte_banque').val() != '') {
            $.ajax({
                dataType: 'json',
                url: '{{path('gds_vente_ajax_add_compte')}}',
                data: 'client_id=' + $('#gds_ventebundle_reglementclienttype_client').val() + '&rib=' + $('#compte_rib').val() + '&banque=' + $('#compte_banque').val(),
                success: function(data) {
                    $('#compte_client').html(data.view)
                    $('#compte_id_' + index).val(data.compte_id)
                    index++
                }
            })
        } else
            index++
        resetFormPaiement()
    }
    function resetFormPaiement() {
        $('#numero_cheque').val('')
        $('#numero_cheque_error').html('')
        $('#date_echeance').val('')
        $('#date_echeance_arror').html('')
        $('#montant_cheque').val('')
        $('#montant_cheque_error').html('')
        $('#compte_banquaire').html('')
        $('#compte_rib').val('')
        $('#compte_banque').val('')
        $('.form_compte_contenu').hide()
        $('.paiement_par_document').hide()
        $('#type_paiement option').each(function() {
            if ($(this).val() == 'espece')
                $(this).attr('selected', 'selected')
            else
                $(this).removeAttr('selected')
        })
    }
    function saveRglememt() {
        if ($('#list_paiement tr').length <= 0) {
            $.msgBox({
                title: "Reglement Client",
                content: "Il faut crée au moins une paiement",
                type: "error",
                buttons: [{value: "OK"}]
            });
        } else {
            var paiements = []
            var factures = []
            var bonLivraisons = []
            var i = 0
            $('#list_paiement tr').each(function() {
                paiements[i] = new Object()
                paiements[i].compte = $('#compte_id_' + i).val()

                paiements[i].montant = $('#montant_' + i).html()
                paiements[i].date = $('#date_' + i).html()
                paiements[i].type = $('#type_' + i).html()
                paiements[i].numero = $('#numero_' + i).html()
                i++
            })
            i = 0
            $('#reglement_facture_select tr').each(function() {
                factures[i] = parseInt($(this).children('td').children('input[id^="facture_"]').val())
                i++
            })
            i = 0
            $('#reglement_bon_livraison_select tr').each(function() {
                bonLivraisons[i] = parseInt($(this).children('td').children('input[id^="facture_"]').val())
                i++
            })
            i = 0
            $.ajax({
                dataType: 'json',
                type: 'post',
                url: '{{path('gds_vente_reglement')}}',
                data: $('#form_reglement').serialize() + '&caisse=' + $('#caisse').val() + '&paiements={"paiements":' + JSON.stringify(paiements) + '}&heure=' + $('#heure').val() + '&factures=' + JSON.stringify(factures) + '&bonLivraisons=' + JSON.stringify(bonLivraisons),
                success: function(data) {
                    if (data.success) {
                        $('#cboxClose').click();
                        $.msgBox({
                            title: "Reglement",
                            content: "Enregistrement Effectué avec succés",
                            type: "info",
                            buttons: [{value: "OK"}],
                            success: function(result) {
                                location.reload();
                            }
                        });
                    } else {
                        $.msgBox({
                            title: "Reglement",
                            content: "Erreur D'enregistrement",
                            type: "error",
                            buttons: [{value: "OK"}]
                        });
                    }

                }
            })
        }
    }
</script>
